---
slug: babel #路径，不能重复
title: babel # 标题
authors: [] # 作者，在authors.yml配置
tags: [facebook, hello, docusaurus] # 标签，在tags.yml配置
toc_min_heading_level: 2 # 最小展示标题
toc_max_heading_level: 5 # 最大展示标题
---

#### 为何需要babel？

> babel是一个工具链，主要用于将新的JavaScript转换为向后兼容的JavaScript


**当前babel版本是7.27，不代表是0.27，代表的是第27个版本**


#### 如果打算在命令行直接使用babel的话

```shell
npm install @babel/cli
```

```shell
npm install @babel/core
```
###### 待转换文件

> 可以看出需要进行箭头函数和const的转换

```js title="index.js"

export const sum = (a, b) => a + b;

export const multiply = (a, b) => a * b;

```

###### 转换

```shell
npx babel index.js -o transform.js
```

**实际上没有效果，因为@babel/core只能完成基本工作**

> 安装babel中需要转换箭头函数和const的插件

```shell title="babel中箭头函数的转换"
npm install @babel/plugin-transform-arrow-functions
```

```shell title="babel中const的转换"

npm install @babel/plugin-transform-block-scoping
```

###### 再次转换

```shell
npx babel index.js -o transform.js --plugins=@babel/plugin-transform-arrow-functions,@babel/plugin-transform-block-scoping
```

```js title="transform.js"

export var sum = function (a, b) {
  return a + b;
};
export var multiply = function (a, b) {
  return a * b;
};


```

### 痛点：太多需要转换的插件总不能一个个安装吧


#### preset-env(预设)

```shell
npm install @babel/preset-env

```

```js title="待转换文件index.js"
export const sum = (a, b) => a + b;

export const multiply = (a, b) => a * b;

export const test = a=>{

    const {b,c} = a;

    setTimeout(()=>{
        console.log('hello world');
    })
}

```
##### 转换

```shell
npx babel index.js -o transform.js --presets=@babel/preset-env
```

```js title="转换后的文件transform.js"

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.test = exports.sum = exports.multiply = void 0;
var sum = exports.sum = function sum(a, b) {
  return a + b;
};
var multiply = exports.multiply = function multiply(a, b) {
  return a * b;
};
var test = exports.test = function test(a) {
  var b = a.b,
    c = a.c;
  setTimeout(function () {
    console.log('hello world');
  });
};

```



### webpack使用babel

```shell
npm install babel babel-loader @babel/core @babel/preset-env

```

```js title="webpack.config.js"

const path = require("node:path");
module.exports = {
    mode: "development",
    entry: "./src/main.js",
    devtool: "source-map",
    output: {
        filename: "bundle.js",//输出文件名
        path: path.resolve(__dirname, "../dist"),//必须是一个绝对路径
    },
    module: {
        //配置loader
        rules: [
            {
                test: /\.js$/,
                use: {
                    loader: require.resolve("babel-loader"),
                    options: {
                        presets: ['@babel/preset-env'],
                    }
                }
            }
        ]
    },
}
```


### babel的配置文件


1. babel.config.js(或者.js,.cjs,.mjs) 可以直接作用于Monorepos项目的子包

2. .babelrc.json(或者.babelrc,.js,.cjs,.mjs) 早期使用较多的配置，但是对于配置Monorepos项目是比较麻烦的


```js title="babel.config.js"

module.exports = {
    presets: [
        '@babel/preset-env',
    ]
}
```


## polyfill

> 如果我们使用了一些语法特性(比如Promise),但是浏览器压根不认识这些特性必然会报错，我们可以使用polyfill来填充或者是打一个补丁


**@babel/polyfill从7.4开始就不推荐了**

```shell
npm install core-js regenerator-runtime
```

* false 不使用polyfill

* usage：按需引入源代码中需要的polyfill

* entry：但凡是目标浏览器需要的polyfill都引入

* corejs: 必须指定corejs版本

**polyfill会和node_modules的polyfill实现方式有所冲突，需要在`webpack.config.js`中排除**


```js title="webpack.config.js"
const path = require("node:path");
module.exports = {
    mode: "development",
    entry: "./src/main.js",
    devtool: "source-map",
    output: {
        filename: "bundle.js",//输出文件名
        path: path.resolve(__dirname, "../dist"),//必须是一个绝对路径
    },
    module: {

        //配置loader
        rules: [

            {
                exclude: /node_modules/,
                test: /\.js$/,
                use: {
                    loader: require.resolve("babel-loader")
                }
            }
        ]
    }
}
```

```js title="babel.config.js"

module.exports = {
    presets: [
        ['@babel/preset-env',{
            useBuiltIns: 'usage',//false：不使用polyfill，usage：按需引入，entry：但凡是目标浏览器需要的polyfill都引入
            "corejs": {
                "version": 3,         // 必须指定 core-js 版本
                "proposals": true      // 可选：支持提案阶段的 API
            }
        }]
    ]
}
```

#### plugin-transform-runtime

> polyfill默认的情况添加的所有特性都是全局的，别人使用我们的代码可能会污染他们的代码，官方推荐plugin-transform-runtime插件

```shell
npm install --save-dev @babel/plugin-transform-runtime

```

```js title="babel.config.js"

module.exports = {
    plugins: [
        [
            '@babel/plugin-transform-runtime',
            {
                corejs: 3
            }
        ]
    ]
}
```

* corejs选项 安装

* false   `npm install --save @babel/runtime`

* 2  `npm install --save @babel/runtime-corejs2`

* 3  `npm install --save @babel/runtime-corejs3`


#### babel转换jsx

```
npm install @babel/preset-react

```

```js title="babel.config.js"

module.exports = {
    presets: [
        ['@babel/preset-env',{
            useBuiltIns: 'usage',//false：不使用polyfill，usage：按需引入，entry：但凡是目标浏览器需要的polyfill都引入
            "corejs": {
                "version": 3,         // 必须指定 core-js 版本
                "proposals": true      // 可选：支持提案阶段的 API
            }
        }],
        [
            '@babel/preset-react'
        ]
    ],
    plugins: [
        [
            '@babel/plugin-transform-runtime',
            {
                corejs: 3
            }
        ]
    ]
}
```

```js title="webpack.config.js"
const path = require("node:path");
module.exports = {
    mode: "development",
    entry: "./src/react_index.jsx",
    devtool: "source-map",
    output: {
        filename: "bundle.js",//输出文件名
        path: path.resolve(__dirname, "../dist"),//必须是一个绝对路径
    },
    module: {

        //配置loader
        rules: [

            {
                exclude: /node_modules/,
                test: /\.jsx$/,
                use:{
                    loader: require.resolve("babel-loader")
                }
            }
        ]
    },
}

```


#### babel转换ts

```shell
npm install typescript -g
```


```shell
npm install ts-loader

```


###### 生成ts.config.json

```shell
tsc --init
```